<template>
  <!-- <VanFormGenerator
    ref="formGenerator"
    :form-generator="fieldss"
  /> -->
  <Promised :promise="fieldsPromise">
    <template v-slot:pending>
      <a-skeleton active />
    </template>
    <template v-slot>
      <div class="slot-field-container">
        <a-form
          :form="form"
          style="max-width: 500px; margin: 40px auto 0;"
          self-update
        >
          <a-form-item
            label="借款金额"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :required="momeyField.required"
          >
            <a-input
              v-decorator.trim="['momey', { initialValue: 500,rules: momeyField.rules }]"
              prefix="$"
              disabled
            />
            <!-- :disabled="momeyField.can_do && (!momeyField.disabled)" -->
          </a-form-item>

          <a-form-item
            label="还款方式"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :required="modeField.required"
          >
            <!-- :disabled="modeField.can_do && (!modeField.disabled)" -->
            <a-radio-group
              v-decorator.trim="['mode', { initialValue: '', rules:modeField.rules }]"
            >
              <a-radio
                v-for="choice in modeField.choice"
                :key="choice.id"
                :value="choice.id"
              >
                {{ choice.title }}
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="借多久"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :required="timeField.required"
          >
            <!-- :disabled="modeField.can_do && (!modeField.disabled)" -->
            <a-radio-group
              v-decorator.trim="['time', { initialValue: timeField.value,rules: timeField.rules }]"
            >
              <a-radio
                v-for="choice in timeField.choice"
                :key="choice.id"
                :value="choice.id"
              >
                {{ choice.title }}
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="怎么还"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :required="paybackField.required"
          >
            <!-- :disabled="modeField.can_do && (!modeField.disabled)" -->
            <a-radio-group
              v-decorator.trim="['payback', { initialValue: paybackField.value,rules: paybackField.rules }]"
            >
              <a-radio
                v-for="choice in paybackField.choice"
                :key="choice.id"
                :value="choice.id"
              >
                {{ choice.title }}
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="还款计划"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input
              v-decorator.trim="['plan', { initialValue: '首期10月19日还款，应还44.6美金，总利息20美金',rules: [] }]"
              disabled
            />
            <!-- :disabled="momeyField.can_do && (!momeyField.disabled)" -->
          </a-form-item>

          <a-form-item
            label="收款卡"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :required="cardField.required"
          >
            <a-input
              v-decorator.trim="['card', { initialValue: cardField.value,rules: cardField.rules }]"
              disabled
            >
              <a-icon
                slot="suffix"
                type="credit-card"
              />
            </a-input>
            <!-- :disabled="momeyField.can_do && (!momeyField.disabled)" -->
          </a-form-item>

          <a-form-item :wrapper-col="{span: 19, offset: 5}">
            <a-button
              type="primary"
              :loading="formLoading"
              @click="nextStep"
            >
              下一步
            </a-button>
          </a-form-item>
        </a-form>
        <a-divider />
        <div class="step-form-style-desc">
          <h3>说明</h3>
          <h4>您的借款提供方xx银行</h4>
          <p>点击下一步表示您已同意相关协议，并将本次借款信息用于个人日常消费，请理性消费谨慎过度消费。</p>
          <!-- <h4>转账到银行卡</h4> -->
          <!-- <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p> -->
        </div>
      </div>
    </template>
  </Promised>
</template>

<script>
import form from './form';

export default {
  name: 'Step1',

  mixins: [form],

  data() {
    return {
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: null,
      formLoading: false
    };
  },

  computed: {
    // 任务id
    tid() {
      return this.$route.params.tid;
    }
  },
  methods: {
    nextStep() {
      this.formLoading = true;
      const { form: { validateFields } } = this;
      // 先校验，通过表单校验后，才进入下一步
      // { first: true }
      const errors = [];
      validateFields(['momey'], { first: true }, (es, values) => {
        if (!es) {
          errors.push(!!es);
        }
      });

      setTimeout(() => {
        if (!errors.includes(true)) {
          this.formLoading = false;
          this.$emit('nextStep');
        }
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
.step-form-style-desc {
  padding: 0 56px;
  color: rgba(0,0,0,.45);

  h3 {
    margin: 0 0 12px;
    color: rgba(0,0,0,.45);
    font-size: 16px;
    line-height: 32px;
  }

  h4 {
    margin: 0 0 4px;
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px;
  }

  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}
</style>
